<template>
	<view class="registration">
		<view class="registration-content">
			<view class="forget-username">
				<uni-icons type="phone" size="30" color="#11c53e"></uni-icons>
				<input type="text" name="phone" placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="forget-code">
				<uni-icons type="chat" size="30" color="#11c53e"></uni-icons>
				<input type="text" placeholder="请输入验证码" v-model="userCode" />
				<button type="warning" :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
			</view>
			<view class="register-item">
				<uni-icons type="locked" size="30" color="#11c53e"></uni-icons>
				<input type="password" name="userPassword"  placeholder="请输入新密码" v-model="userPassword" />
			</view>
			<view class="register-item">
				<uni-icons type="locked-filled" size="30" color="#11c53e"></uni-icons>
				<input type="password" name="againPassword"  placeholder="请再次输入密码" v-model="againPassword" />
			</view>
		</view>
		<view class="forget-button"><button @click="submit">下一步</button></view>
		<view class="registration-botton"><view class="registration-password" @click="goBack">密码登陆</view></view>
	</view>
</template>

<script>
import { forgetUserPassword,getCode } from '../../../api/user.js'
export default {
	data() {
		return {
			phone: '',
			usedPhone: '',
			userCode: '1234',
			userPassword: '',
			againPassword: '',
			disabled: false,
			codeNum: 10,
			codeMsg: '获取验证码',
			code: '1234',
			rules: {
				phone: {
					rule: '/^1[23456789]\d{9}$/',
					meg: '手机的格式不对'
				}
			}
		};
	},
	methods: {
		async sendCode() {
			if (this.phone == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (this.phone != '') {
				let reg = /^1[3456789]\d{9}$/;
				if (!reg.test(this.phone)) {
					uni.showToast({
						title: '输入有效的手机号',
						icon: 'none'
					});
				}else {
					//禁用按钮
					this.disabled = true;
					//发送请求
					let result = await getCode({phone: this.phone})
					if(result.code === 200){
						this.code = result.data
						this.usedPhone = this.phone
					}
					//倒计时
					let timer = setInterval(() => {
						--this.codeNum;
						this.codeMsg = `重新发送 ${this.codeNum}`;
					}, 1000);
					//判断定时器停止
					setTimeout(() => {
						clearInterval(timer);
						(this.disabled = false), (this.codeMsg = '获取验证码'), (this.codeNum = 10);
					}, 10000);
				}
			}
		},
		async submit() {
			if (this.phone == '' || this.userCode == '' || this.userPassword == '' || this.againPassword == '') {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
			} else if (this.userPassword != this.againPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				});
			} else if (this.userCode != this.code) {
				uni.showToast({
					title: '验证码错误',
					icon: 'none'
				});
			} else if (this.phone != this.usedPhone) {
				uni.showToast({
					title: '请使用获取验证码的手机号',
					icon: 'none'
				});
			} else {
				//验证码正确
				let result = await forgetUserPassword({
					userPhone: this.phone,
					newPassword: this.userPassword
				});
				if (result.code === 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					uni.navigateBack()
				}
			}
		},
		//密码登录
		goBack() {
			uni.navigateBack()
		},
		validate(key) {
			let bool = true;
			if (!this.rules[key].rule.test(this[key])) {
				uni.showToast({
					title: this.rules[key].meg,
					icon: 'none'
				});
				bool = false;
				return false;
			}
			return bool;
		}
	}
};
</script>

<style lang="scss">
.registration {
	width: 100%;
	background-position: center;
	background-size: cover;
	background-color: #fff;
	margin: 0px;
	background-size: 100% 100%;
	background-attachment: fixed;
	opacity: 0.8;
	// margin-top: 100rpx;
	.registration-content{
		display: flex;
		flex-direction: column;
		margin: 0 50rpx;
		input{
			padding: 10rpx;
			width:60%;
			height: 70rpx;
		}
		i {
			color: #11c53e;
			padding-right: 20rpx;
			font-size: 50rpx;
		}
		.forget-username{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
		}
		.forget-code{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
			button{
				width:250rpx;
				height: 85rpx;
				font-size: 30rpx;
				line-height: 85rpx;
				background-color: #11c53e;
				color: #fff;
			}
		}
		.register-item {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
		}
	}
	.forget-button{
		margin-top: 150rpx;
		width: 90%;
		margin-left: 5%;
		button{
			background-color: #11c53e;
			color: #fff;
		}
	}
}

.registration-botton {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-between;
	.registration-password {
		padding-left: 40rpx;
		color: #11c53e;
	}
	.registration-zhuce {
		padding-right: 40rpx;

		color: #11c53e;
	}
}
</style>

